<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>设置</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./element-ui/index.css" />
  <script src="./js/vue.min.js"></script>
  <script src="./element-ui/index.js"></script>
  <script src="./js/axios.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", sans-serif;
    }

    .setting-container {
      display: flex;
      height: 100vh;
    }


    .content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .content-title {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
    }

    .close-btn {
      cursor: pointer;
      font-size: 20px;
      color: #909399;
    }

    .menu-item {
      padding: 14px 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #606266;
    }

    .menu-item.active {
      background-color: #ecf5ff;
      color: #409EFF;
    }

    .menu-item i {
      margin-right: 10px;
      font-size: 16px;
    }

    .form-section {
      margin-bottom: 30px;
    }

    .section-title {
      font-size: 16px;
      margin-bottom: 20px;
      color: #303133;
    }

    .form-row {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
    }

    .form-label {
      width: 120px;
      color: #606266;
    }

    .form-content {
      flex: 1;
    }

    .form-action {
      width: 80px;
      text-align: right;
    }

    .footer-hint {
      color: #909399;
      font-size: 14px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside style="width: 180px;height:100vh;">
        <div>
          <div v-for="(item, index) in menuItems" :key="index" class="menu-item"
               :class="{ active: activeName === item.name }" @click="activeName = item.name">
            <i :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </el-aside>
      <el-container style="background-color: #f5f7fa;">
        <el-header height="50px" style="display: flex;align-items: center;justify-content: space-between;">
          <div class="content-title">{{ getCurrentMenu().label }}</div>
          <div>
            <!-- 保存图标 -->
            <el-button type="primary" @click="save()" size="small" plain><span> 保 存 </span> </el-button>
          </div>
        </el-header>
        <!-- 内容区域 -->
        <el-main>
          <div>
            <!-- 通用设置 -->
            <div v-if="activeName === 'tongyong'">
              <div class="form-section">
                <div class="section-title">系统设置</div>
                <div class="form-row">
                  <div class="form-label">客户端名称</div>
                  <div class="form-content">
                    <el-input v-model="systemForm.nickName" placeholder="客户端名称" size="small"></el-input>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-label">系统端口</div>
                  <div class="form-content">
                    <el-input v-model="systemForm.port" placeholder="请输入系统端口" type="number" size="small"
                              style="width: 100px;"></el-input>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-label">关闭行为</div>
                  <div class="form-content">
                    <el-radio v-model="systemForm.closeType" label="tray">最小化到托盘</el-radio>
                    <el-radio v-model="systemForm.closeType" label="quit">退出</el-radio>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-label">开机自启</div>
                  <div class="form-content">
                    <el-radio v-model="systemForm.autoLaunch" label="enabled">启用</el-radio>
                    <el-radio v-model="systemForm.autoLaunch" label="disabled">禁用</el-radio>
                  </div>
                </div>
              </div>
            </div>

            <!-- 存储设置 -->
            <div v-if="activeName === 'cunchu'">
              <div class="form-section">
                <div class="section-title">存储设置</div>
                <!-- 这里添加存储设置的表单内容 -->
                <div class="form-row">
                  <div class="form-label">缓存路径</div>
                  <div class="form-content">
                    <el-input v-model="systemForm.tempPath" placeholder="请输入缓存路径" size="small"></el-input>
                    <!-- 提示 缓存文件夹名称 -->
                    <div style="font-size: 10px; color: #909399;">数据将保存到：{{ systemForm.tempPath }}\{{ appDataDirName }}
                    </div>
                  </div>
                  <div class="form-action">
                    <el-button type="text" size="small" @click="selectDirectory('tempPath')">修 改</el-button>
                  </div>
                </div>
              </div>

              <div class="form-section">
                <div class="section-title">远程路径</div>
                <div class="form-row">
                  <div class="form-label">远程图片路径</div>
                  <div class="form-content">
                    <el-input v-model="systemForm.imageDownloadPath" placeholder="请输入图片下载路径"
                              :disabled="selectImageDownloadPath" size="small"></el-input>
                  </div>
                  <div class="form-action">
                    <el-button type="text" size="small"
                               @click="selectImageDownloadPath = !selectImageDownloadPath">修改</el-button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 打印设置 -->
            <div v-if="activeName === 'printer'">
              <div class="form-section">
                <div class="section-title">打印设置</div>
                <!-- 这里添加打印设置的表单内容 -->
                <div class="form-row">
                  <div class="form-label">默认打印机</div>
                  <div class="form-content" style="display: flex; align-items: center;gap: 10px;">
                    <el-select v-model="printerForm.defaultPrinter" placeholder="请选择默认打印机" size="small"
                               style="width: 100%;">
                      <el-option v-for="printer in printers" :key="printer.name" :label="printer.name"
                                 :value="printer.name"></el-option>
                    </el-select>

                    <el-tooltip class="item" effect="dark" content="刷新打印机列表" placement="top">
                      <!-- 点击出现转圈圈效果 -->
                      <el-button type="text" @click="onLoadPrinters"
                                 :icon="loadAction.printers ? 'el-icon-loading' : 'el-icon-refresh'"
                                 :disabled="loadAction.printers"></el-button>
                    </el-tooltip>
                  </div>
                </div>
                <!-- 等待生成pdf，页面渲染延迟时间 -->
                <div class="form-row">
                  <div class="form-label">等待生成pdf，页面渲染延迟时间</div>
                  <div class="form-content">
                    <!-- 滑动选择器 显示当前值 -->
                    <el-slider v-model="systemForm.waitRenderTime" :min="300" :max="5000" :step="100"  show-stops show-input></el-slider>
                    <div style="font-size: 10px; color: #909399;">当前值：{{ systemForm.waitRenderTime }}毫秒</div>
                    <div style="font-size: 10px; color: #909399;">单位：毫秒 | 最小：300毫秒 | 最大：5000毫秒</div>
                  </div>
                </div>
                <!-- 本地字体库 -->
                <div class="form-row">
                  <div class="form-label">字体库</div>
                  <div class="form-content" style="display: flex; align-items: center;">
                    <el-button size="small" type="primary" @click="syncFonts" :disabled="loadAction.fonts">同 步 字 体
                      库</el-button>
                    <div style="margin-left: 10px; border-left: 1px solid #ccc; padding-left: 10px;">
                      <div style="font-size: 12px; font-weight: bold;">已下载字体：</div>
                      <p v-for="(font,index) in fonts" :key="font.name" :index="index"
                         style="font-size: 12px; text-decoration: underline;font-weight: bold;">
                        <span>{{ index+1 }}.{{ font.name }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: () => {
        return {
          activeName: 'tongyong',
          selectImageDownloadPath: true,
          appDataDirName: "",
          menuItems: [
            { name: 'tongyong', label: '通用', icon: 'el-icon-s-operation' },
            { name: 'cunchu', label: '存储', icon: 'el-icon-folder' },
            { name: 'printer', label: '打印&字体', icon: 'el-icon-printer' },
          ],
          systemForm: {
            nickName: '',
            port: 63010,
            imageDownloadPath: '',
            closeType: 'tray',
            tempPath: "",
            autoLaunch: 'disabled',
            waitRenderTime: 300
          },
          printerForm: {
            defaultPrinter: ''
          },
          printers: [],
          fonts: [],
          loadAction: {
            printers: false,
            fonts: false
          }
        };
      },
      created() {
        this.initFun()
      },
      methods: {
        save(action = "") {
          // 询问是否保存
          this.$confirm('是否保存设置?保存后需要重启应用!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log("this.systemForm:save", this.systemForm)
            for (let key in this.systemForm) {
              window.electronStore.set(key, this.systemForm[key])
            }
            window.api.restart()
          }).catch(() => {
            console.log('取消')
          })
        },
        // 选择目录 key 为 data 的 key 例如 systemForm.tempPath
        selectDirectory(key = '') {
          window.api.selectDirectory().then(res => {
            console.log(res)
            if (res) {
              this.systemForm[key] = res
            }
          })
        },
        initFun() {
          // 初始化表单数据
          this.initSettingFormData()
          // 获取打印机列表
          this.onLoadPrinters()
          // 获取本地字体列表
          this.onLoadFonts()

          window.api.getAppInfo().then(res => {
            this.appDataDirName = res.appDataDirName
          })

        },
        onLoadPrinters() {
          this.loadAction.printers = true
          window.api.getPrinters().then(res => {
            this.printers = res
          }).finally(() => {
            this.loadAction.printers = false
          })
        },
        onLoadFonts() {
          this.loadAction.fonts = true
          window.api.getLocalFonts().then(res => {
            this.fonts = res
          }).finally(() => {
            this.loadAction.fonts = false
          })
        },
        // 同步字体库
        syncFonts() {
          this.loadAction.fonts = true
          axios.get('/fonts/download').then(res => {
            this.$message.success('同步字体库成功!')
          }).catch(() => {
            this.$message.error('同步字体库失败!')
          }).finally(() => {
            this.loadAction.fonts = false
          })
        },
        getCurrentMenu() {
          return this.menuItems.find(item => item.name === this.activeName) || {};
        },
        handleClick() {
          console.log(this.activeName)
        },
        initSettingFormData() {
          if (window.electronStore) {
            for (let key in this.systemForm) {
              this.systemForm[key] = window.electronStore.get(key)
            }
          }
        }
      },
    });
  </script>
</body>
</html>